<template>
  <el-dialog
    v-model="dialogVisible"
    title="公告详情"
    width="800px"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div v-loading="loading" class="detail-container">
      <template v-if="announcementDetail">
        <!-- 标题 -->
        <h2 class="detail-title">{{ announcementDetail.title }}</h2>

        <!-- 元信息 -->
        <div class="detail-meta">
          <div class="meta-item">
            <el-icon><User /></el-icon>
            <span>{{ announcementDetail.publisherName }}</span>
          </div>
          <div class="meta-item">
            <el-icon><Clock /></el-icon>
            <span>{{ formatDateTime(announcementDetail.createTime) }}</span>
          </div>
          <div class="meta-item">
            <el-icon><View /></el-icon>
            <span>浏览 {{ announcementDetail.viewCount }} 次</span>
          </div>
        </div>

        <el-divider />

        <!-- 内容 -->
        <div class="detail-content">
          <pre>{{ announcementDetail.content }}</pre>
        </div>
      </template>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { User, Clock, View } from '@element-plus/icons-vue'
import { reqGetAnnouncementDetail } from '@/api/announcement'
import type { AnnouncementItem } from '@/api/announcement/type'
import dayjs from 'dayjs'

const props = defineProps<{
  modelValue: boolean
  announcementId: number
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void
  (e: 'refresh'): void
}>()

const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const loading = ref(false)
const announcementDetail = ref<AnnouncementItem | null>(null)

// 获取公告详情
const getAnnouncementDetail = async () => {
  if (!props.announcementId || loading.value) return
  loading.value = true

  try {
    const result: any = await reqGetAnnouncementDetail(props.announcementId)
    if (result.code === 200) {
      announcementDetail.value = result.data
    } else {
      ElMessage.error(result.message || '获取公告详情失败')
    }
  } catch (error) {
    console.error('获取公告详情失败:', error)
    ElMessage.error('获取公告详情失败')
  } finally {
    loading.value = false
  }
}

// 关闭对话框
const handleClose = () => {
  emit('update:modelValue', false)
  announcementDetail.value = null
}

// 格式化日期时间
const formatDateTime = (dateStr: string) => {
  return dayjs(dateStr).format('YYYY-MM-DD HH:mm:ss')
}

// 监听对话框打开
watch(() => props.modelValue, (newVal) => {
  if (newVal && props.announcementId) {
    getAnnouncementDetail()
  }
})
</script>

<style scoped lang="scss">
.detail-container {
  min-height: 200px;

  .detail-title {
    margin: 0 0 20px;
    font-size: 24px;
    font-weight: 600;
    color: #303133;
  }

  .detail-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;

    .meta-item {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 14px;
      color: #909399;

      .el-icon {
        font-size: 16px;
      }
    }
  }

  .detail-content {
    pre {
      margin: 0;
      padding: 20px;
      background-color: #f5f7fa;
      border-radius: 4px;
      font-family: inherit;
      font-size: 14px;
      line-height: 1.8;
      color: #303133;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>

